#joinus{
  background:url(../images/joinus-bg.jpg ) no-repeat 50% 50%;
  .center-row{
    img{
      margin-top:100px;
    }
  }

  .container{
    width:1120px;
    .joinus-pod{
      position: relative;
      width:333px;
      height:496px;
      margin:10px;
      display: inline-block;
      cursor: pointer;
      overflow: hidden;
      &:hover{
        .mask{
          top:0px;
          .en{
            display: none;
          }
          .zh{
            top:50%;
          }
          .logo{
            opacity: 0.99;
          }

        }
      }
      &.active{
        .mask{
          top:0px;
          .txt{
            opacity: 0.99;
          }
          .en,.zh{
            display: none;
          }
          .logo{
            
            top: 470px;
            opacity: 0.99;
          }
        }
      }
      .mask{
        background:rgba(0,0,0,0.25);
        width: 100%;
        height: 100%;
        top:450px;
        position: absolute;
        color:#fff;
        transition:all .3s;
        .txt{
          padding:1em;
          opacity: 0;
          transition:all .5s;
          transition-delay:.3s;
          .title{
            font-size:16px;
            text-align: center;
          }
          p{
            font-size:12px;
            font-family: SimSun;
            line-height: 1.6em;
          }
        }
        .en,.zh{
          text-align: center;
          line-height: 3em;
        }
        .zh{
          position: absolute;
          left: 50%;
          margin-left:-2em;
          margin-top:-1em;
        }
        .logo{
          position: absolute;
          display: inline-block;
          left: 50%;
          top:50%;
          margin-left:-25px;
          margin-top:-50px;
          opacity: 0;
          transition: all .5s;
          transition-delay: .3s;
        }
      }
    }
  }
}